<template>
    <basic-container>
        <el-form :inline="true" :model="searchForm" size="small">
            <el-form-item label="访问日期" v-show="drillingSelectorList.indexOf('visit_date') > -1">
                <el-date-picker
                        v-model="searchForm.visitDate"
                        value-format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择访问日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="目的ip">
                <el-input v-model="searchForm.destIp" placeholder="输入目的ip"></el-input>
            </el-form-item>
            <el-form-item label="方向" v-show="drillingSelectorList.indexOf('visit_direction') > -1">
                <el-select v-model="searchForm.visitDirection" placeholder="选择方向" clearable >
                    <el-option
                            label="源ip归属山东"
                            value="s">
                    </el-option>
                    <el-option
                            label="目的ip归属山东"
                            value="d">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
        </el-form>
        <el-divider></el-divider>
        <drilling-selector :selectorOption="selectorOption"></drilling-selector>
        <el-divider></el-divider>
        <drilling-table
                ref="drillingTable"
                :showOperation="showOperation"
                :page.sync="page"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :drilling-selector-list="drillingSelectorList"
                :option="option"
                :defaultSort="defaultSort"
                :sort="sortProp"
                @sort-change="handleSortChange"
                :tableData="tableData"></drilling-table>
    </basic-container>
</template>

<script>

  import drillingSelector from "./components/drilling-selector";
  import drillingTable from "./components/drilling-table";
  import {getStatisticsForLoginError} from "@/youan/api/statistics/statistics";
  import {getDropdown} from "@/youan/api/audit/eventRuleNum";
  import {deepClone} from "../../../../util/util";

  export default {
    name: "destination_login_error",
    data() {
      return {
        selectorOption: [
          {
            label: "日期",
            prop: "visit_date",
            value: false,
          },
          {
            label: "方向",
            prop: "visit_direction",
            value: false,
          },
        ],
        showOperation: false,
        page: {
          current: 1,
          size: 20,
          total: 0
        },
        defaultSort: {prop: 'visitNumber', order: 'descending'},
        sortProp: {
          directionName: "visit_direction",
          issueTypeName: "issue_type"
        },
        option: {
          column: [
            {
              prop:"visitDate",
              label:"日期",
              showColumnSelectorProp: "visit_date",
              sortable: "custom"
            },
            {
              prop:"destIp",
              label:"目的ip",
              sortable: "custom"
            },
            {
              prop:"directionName",
              label:"方向",
              showColumnSelectorProp: "visit_direction",
              sortable: "custom"
            },
            {
              prop:"issueTypeName",
              label:"事件类型",
              width:"180",
            },
            {
              prop:"visitNumber",
              label:"次数",
              sortable: "custom"
            }
          ]
        },
        tableData: [],
        drillingSelectorList: ["dest_ip"], // 当前下钻项
        searchForm:{
          visitDate: "",
          destIp: "",
          visitDirection: "",
          issueType: ""
        },
        dropdownList: []
      }
    },
    async created() {
      this.onload();
      const result = await getDropdown();
      if(result.data.success) {
        this.dropdownList = result.data.data;
      }
    },
    methods: {
      async onload(sort = {}) {

        let params = deepClone(this.searchForm);

        if(!sort.sortItem) {
          params.sortItem = toLine(this.defaultSort.prop);
          params.sort = this.defaultSort.order == "ascending" ? "asc" : "desc";
        }else {
          params.sortItem = sort.sortItem;
          params.sort = sort.sort;
        }

        const result = await getStatisticsForLoginError(this.page.current, this.page.size, params, this.drillingSelectorList.join(","))
        if(result.data.success) {
          this.tableData = result.data.data.records;
          this.page.total = result.data.data.total;
        }
        this.$refs.drillingTable.$refs.crud.doLayout();
      },
      handleSizeChange() {
        this.onload();
      },
      handleCurrentChange() {
        this.onload();
      },
      search() {
        this.onload();
      },
      handleSortChange(sort) {
        this.onload(sort);
      }
    },
    watch: {
      selectorOption: {
        handler: function (newVal) {
          this.drillingSelectorList = ["dest_ip"];
          // 收集当前选中的下钻项
          for(let item of newVal) {
            if(item.value) {
              this.drillingSelectorList.push(item.prop)
            }
          }
          if(this.drillingSelectorList.includes("visit_date")) {
            this.showOperation = true;
          }else {
            this.showOperation = false;
          }

          // 重置searchForm
          if(!this.drillingSelectorList.includes("visit_date")) {
            this.searchForm.visitDate = "";
          }
          if(!this.drillingSelectorList.includes("visit_direction")) {
            this.searchForm.visitDirection = "";
          }

          this.onload();
        },
        deep: true
      }
    },
    components: {
      drillingSelector,
      drillingTable
    }
  }

  // 驼峰转换下划线
  function toLine(name) {
    return name.replace(/([A-Z])/g,"_$1").toLowerCase();
  }

</script>

<style scoped>

</style>